<template>
    <div>
        <!-- {{info.name}}---{{info.age}} -->
        {{name}}---{{age}}

        <button @click="changeAge">修改age</button>
    </div>
</template>
<script>
import { reactive, toRefs, toRef } from 'vue';

export default {
    setup() {
        const info = reactive({name: "yzh", age: 18});
        
        //1.toRefs: 将reactive对象中的所有属性都转成ref，建立连接
        // let { name, age } = toRefs(info);

        //2.toRef: 将其中一个属性转换为ref，建立连接
        let { name } = info;
        let age = toRef(info, "age");

        const changeAge = () => {
            age.value++;
        }

        return {
            name,
            age,
            changeAge
        }
    }
}
</script>
<style>
</style>
